<template>
  <div class="root">
    <div>{{ number }}</div>
    <button @click="changeNumber">click</button>
  </div>
</template>

<script>
import { watch,ref, reactive } from "vue";

export default {
  setup() {
    const number = ref(0);
    const number2 = ref(10);
    const obj = reactive({
      name:'mikaisa',
      age:18,
      job:{
        salary:'22k'
      }
    })

    const changeNumber = function () {
      number.value++;
      number2.value++;
      obj.age++;
      obj.job.salary = '1'+obj.job.salary;
    };

    // watch的使用很简单，直接调用即可，第一个参数为你要监听的数据本身，第二个为回调函数，这个回调函数有两个参数，一个是变化后的新值，一个是改变前的旧值。这样就可以实现监听了。watch一般是不会在模板中出现的，所以不需要在下面return啥的，所以也不用搞个变量接它的返回
    watch(number, (newVal,oldVal) => {
      console.log(newVal,oldVal);
    });

    // 第二种写法
    watch(()=>number.value,(newVal,oldVal)=>{
      console.log(newVal,oldVal);
    })

    // 第三种写法, 多个数据源监听
    watch([number,number2],(newVal,oldVal)=>{
      console.log(newVal,oldVal);//效果会以数组的形式呈现，比如这里newVal就是[number的新值,number2的新值]，oldVal就是[number的旧值,number2的旧值]
    })

    // 其实watch里还有第三个参数，就是一个配置对象，其中immediate属性代表立即触发，deep代表深度监听。立即触发就是页面刚加载的时候也出发一次，深度监听就是当一个对象里面有任何的变动，不论属性是在第几层，都会触发watch。友情建议：deep不是很建议使用
    watch(obj, (newVal,oldVal) => {
      console.log(newVal,oldVal);
    },{immediate:true,deep:true});

    // 如果你想只监听对象中的某一个属性，可以写成函数式
    watch(()=>obj.age,(n,o)=>{
      console.log('obj.age从'+o+'变成'+n+'了');
    })

    return {
      number,
      changeNumber,
    };


  },
};
</script>

<style scoped>
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
